import React, {PureComponent} from 'react';
import {StyleSheet, View, Text, TouchableOpacity, TouchableWithoutFeedback} from 'react-native';

export default class extends PureComponent {
    render() {
        const {present_month_price, today_price, fans_number, can_withdraw_cash, isLogin, navigation} = this.props;
        return (
            isLogin ?
                <View style={styles.container}>
                    <View style={styles.titleWrap}>
                        <Text>
                            <Text style={[styles.moneyText, {paddingRight: 12}]}>可提现金额 </Text>
                            <Text style={styles.moneyValue}>￥{can_withdraw_cash}</Text>
                        </Text>
                        <TouchableOpacity onPress={() => {
                            navigation.navigate('withdrawCash');
                        }}>
                            <View style={styles.withdrawMoneyBtn}>
                                <Text style={styles.withdrawMoneyText}>提现</Text>
                            </View>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.amountDetail}>
                        <View style={styles.amountItem}>
                            <Text style={styles.moneyValue}>￥{present_month_price}</Text>
                            <Text style={styles.moneyText}>本月预估</Text>
                        </View>
                        <View style={styles.amountItem}>
                            <Text style={styles.moneyValue}>￥{today_price}</Text>
                            <Text style={styles.moneyText}>今日收益</Text>
                        </View>
                        <TouchableWithoutFeedback onPress={() => {
                            navigation.navigate('fans');
                        }}>
                            <View style={[styles.amountItem, {borderRightWidth: 0}]}>
                                <Text style={styles.moneyValue}>{fans_number}</Text>
                                <Text style={styles.moneyText}>我的粉丝</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </View> : null
        );
    }
}

const styles = StyleSheet.create({
    container: {
        marginLeft: 12,
        marginRight: 12,
        marginTop: -40,
        borderRadius: 8,
        backgroundColor: '#fff'
    },
    titleWrap: {
        width: '100%',
        height: 40,
        paddingLeft: 12,
        paddingRight: 12,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    moneyText: {
        fontSize: 12,
        color: '#4c4c4c'
    },
    moneyValue: {
        fontSize: 14,
        color: '#f43522'
    },
    withdrawMoneyBtn: {
        paddingLeft: 6,
        paddingRight: 6,
        borderRadius: 10,
        borderWidth: 1,
        borderColor: '#f43522'
    },
    withdrawMoneyText: {
        fontSize: 12,
        height: 16,
        lineHeight: 16,
        color: '#f43522'
    },
    amountDetail: {
        paddingTop: 16,
        paddingBottom: 16,
        flexDirection: 'row',
        borderTopWidth: 1,
        borderColor: '#f0f0f0'
    },
    amountItem: {
        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 40,
        borderRightWidth: 1,
        borderColor: '#f0f0f0'
    }
});
